<template>
  <div v-loading="refreshLoaing" :class="{'mobile-detail-wrap':showMobilePage}" class="customer-container no-margin">
    <div class="customer-info small-padding">
      <div class="flex-center top" style="margin-bottom:11px;">
        <div :style="{'width': showMobilePage?'100%':'30%'}" class="flex-center">
          <el-tooltip placement="top">
            <div slot="content">{{ data.projectName }}</div>
            <Title :title="data.projectName" class="ellipsis" style="flex:0 1 auto;"/>
          </el-tooltip>
          <el-button type="text" class="text-btn" @click="setProjectName">设置</el-button>
        </div>
        <div class="flex-center">
          <span class="gray-text">关联项目订单：</span>
          <div :class="{'light-text': data.projectNumber}" @click="toProjectDetail">
            <ToolTip :content="data.projectNumber" />
          </div>
          <el-button type="text" class="text-btn" @click="openProjectOrder">设置</el-button>
        </div>
        <div class="flex-center">
          <BtnGroup
            ref="btnGroupRef"
            :list="[{label:'导出', exportApi: `admin/publish/report/export?id=${id}`, exportName:'报告详情', beforeExport: exportBeforeExport, type: 'export',auth: hasRouteAuth('publish:publishList:export')}]"
          />
          <el-button v-if="data.collectWays === 0" :loading="refreshLoaing" :disabled="!data.canRefresh" plain size="small" class="center-btn" @click="updateData(true, data.canRefresh)">采集</el-button>
          <PlainCreateBtn v-if="hasRouteAuth('publish:publishList:createOrImport')" icon-name="el-icon-plus" size="small" class="ml10" @click="handleAddLink">添加链接</PlainCreateBtn>
        </div>
      </div>
      <DetailInfo :detail-data="data" :id="id" @updateData="updateData"/>
    </div>
    <div class="table-list">
      <Table ref="reportTable" :id="id"/>
    </div>
    <fixed-pagination>
      <div class="center">
        <el-button
          class="back-btn cancel-btn-style"
          type="info"
          size="small"
          @click="handleBack"
        >返回</el-button>
      </div>
    </fixed-pagination>
    <ProjectNameDialog ref="projectNameRef" @updateData="updateData"/>
    <LinkDialog ref="linkRef" @updateData="updateData"/>
    <RelatedProjectOrder ref="projectOrderRef" :visible.sync="showRelatedProject" @confirmOrder="confirmOrder"/>
  </div>
</template>

<script>
import Title from '@/components/Title';
import RelatedProjectOrder from '@/components/Publish/relatedProjectOrder';
import BtnGroup from '@/components/Common/baseComponent/btnGroup';
import Table from './module/table';
import LinkDialog from './module/linkDialog';
import DetailInfo from './module/detailInfo';
import ProjectNameDialog from './module/projectNameDialog';
import { mapState } from 'vuex';
import { getReportDetail, editReportDetail } from '@/api/publish';
import { hasRouteAuth } from '@/utils/permission';

export default {
  components: {
    Title,
    DetailInfo,
    Table,
    ProjectNameDialog,
    RelatedProjectOrder,
    BtnGroup,
    LinkDialog
  },
  data() {
    return {
      data: {
        projectName: '项目名称',
        projectId: 225
      },
      showRelatedProject: false,
      refreshLoaing: false,
      id: ''
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  created() {
    this.id = this.$route.params.id;
    this.getData();
  },
  methods: {
    hasRouteAuth,
    getData() {
      getReportDetail(this.id).then(res => {
        this.data = res.data;
      }).catch(err => {
        console.log(err);
      });
    },
    setProjectName() {
      const params = {
        name: this.data.projectName,
        id: this.id
      };
      this.$refs.projectNameRef && this.$refs.projectNameRef.initDialog(params);
    },
    openProjectOrder() {
      this.showRelatedProject = true;
      this.$refs['projectOrderRef'].init({ id: this.data.projectId, projectNum: this.data.projectNumber });
    },
    exportBeforeExport() {
      if (this.$refs.btnGroupRef) {
        this.$refs.btnGroupRef.btnExport();
      }
    },
    confirmOrder(val) {
      editReportDetail(this.id, val).then(res => {
        this.updateData();
      }).catch(err => {
        console.log(err);
      });
    },
    updateData(isFresh = false, canRefresh = true) {
      // 更新数据
      if (!canRefresh) return;
      this.refreshLoaing = true;
      getReportDetail(this.id, { isFresh }).then(res => {
        this.refreshLoaing = false;
        this.$message.success('操作成功');
        this.data = res.data;
        this.$refs.reportTable.fetchData();
      }).catch(err => {
        this.refreshLoaing = false;
        console.log(err);
      });
    },
    handleAddLink() {
      const params = { id: this.id };
      this.$refs.linkRef && this.$refs.linkRef.initDialog(params);
    },
    handleBack() {
      this.$router.push({
        name: 'publish'
      });
    },
    toProjectDetail() {
      if (this.data.projectNumber) {
        const routeUrl = this.$router.resolve({
          name: 'projectDetail',
          params: { id: this.data.projectId }
        });
        window.open(routeUrl.href, '_blank');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.customer-info {
  margin-bottom: 0;
  background-color: #fff;
  padding: 11px 24px 0 24px;
  .top {
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .gray-text {
    color: #999;
    font-size: 14px;
  }
  .text-btn {
    margin-left: 10px;
    font-size: 14px;
  }
  .light-text {
    font-size: 14px;
    max-width: 220px;
    color: #406EFF;
    cursor: pointer;
  }
  p {
    font-size: 14px;
  }
}
.customer-container {
  background: #fff;
  margin: 16px;
  .table-list {
    background-color: #fff;
    padding: 23px 24px 55px 24px;
    min-height: calc(100vh - 380px);
  }
}
.center-btn {
  margin-left: 10px;
}
</style>
